<!--
  废弃组件。。。
-->

<template>
    <div class="pager">
        <!-- 分页组件 -->
        <Page class="pagination"
              ref="page"
              :loading="loading"
              :disabled="disabled"
              :total="total"
              :show-sizer="sizer"
              :show-elevator="elevator"
              :current="params.page"
              :page-size="params.rows"
              :page-size-opts="sizeOpts"
              :show-total="true"
              @on-change="currentChange"
              @on-page-size-change="pageChange"/>
    </div>
</template>

<script>
    export default {
        name: "Pagination",
        props: {
            loading: {
                type: Boolean,
                default: false
            },
            total: {
                // 数据总数
                type: [String, Number],
                default: 0
            },
            page: {
                // 当前分页
                type: [String, Number],
                default: 1
            },
            rows: {
                // 每页显示多少条
                type: [String, Number],
                default: 10
            },
            disabled: {
                type: Boolean,
                default: false
            },
            sizer: {
                // 是否显示下拉组件
                type: Boolean,
                default: false
            },
            elevator: {
                // 是否显示跳转输入框
                type: Boolean,
                default: false
            }
        },
        watch: {
            'params.page'(to) {
                this.params.page = to;
            },
            'params.rows'(to) {
                this.params.rows = to;
            }
        },
        data() {
            return {
                sizeOpts: [10, 20, 50, 100],
                params: {
                    page: 1,
                    rows: 10
                }
            }
        },
        methods: {
            // 分页改变
            currentChange(current) {
                this.params.page = current;
                this.onChange();
            },
            // 每页显示条数改变
            pageChange(rows) {
                this.params.page = 1;
                this.params.rows = rows;
                this.onChange();
            },
            onChange() {
                this.$emit("update:page", this.params.page);
                this.$emit("update:rows", this.params.rows);
                this.$emit("on-change");
            }
        }
    }
</script>
<style scoped>
    .pager {
        margin-top: 5px;
        text-align: right;
    }
</style>
